<script setup lang="ts">
import { ref } from 'vue'

// 常见问题列表
const faqList = ref([
  {
    question: '如何修改个人信息？',
    answer: '您可以在"我的"页面点击头像进入个人资料页面，点击编辑按钮即可修改个人信息。',
    isOpen: false,
  },
  {
    question: '如何申请退款？',
    answer: '您可以在订单详情页面点击"申请退款"按钮，填写退款原因后提交申请。客服会在1-2个工作日内处理您的申请。',
    isOpen: false,
  },
  {
    question: '忘记密码怎么办？',
    answer: '您可以在登录页面点击"忘记密码"，通过手机号验证后重置密码。',
    isOpen: false,
  },
])

// 切换FAQ展开状态
function toggleFaq(index: number) {
  faqList.value[index].isOpen = !faqList.value[index].isOpen
}

// 开始在线聊天
function startChat() {
  uni.navigateTo({
    url: '/pages/message/chat/index?targetId=customer-service',
  })
}

// 拨打电话
function makePhoneCall() {
  uni.makePhoneCall({
    phoneNumber: '4001234567',
    success: () => {
      console.log('拨打电话成功')
    },
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none',
      })
    },
  })
}

// 发送邮件
function sendEmail() {
  // 复制邮箱地址
  uni.setClipboardData({
    data: 'support@example.com',
    success: () => {
      uni.showToast({
        title: '邮箱地址已复制',
        icon: 'success',
      })
    },
  })
}
</script>

<template>
  <view class="container">
    <!-- 客服信息 -->
    <view class="service-info">
      <image class="service-avatar" src="/static/images/customer-service.svg" mode="aspectFill" />
      <view class="service-name">
        在线客服
      </view>
      <view class="service-status">
        <text class="status-dot" />
        <text>在线</text>
      </view>
    </view>

    <!-- 联系方式列表 -->
    <view class="contact-list">
      <!-- 在线聊天 -->
      <view class="contact-item" @click="startChat">
        <view class="item-left">
          <text class="iconfont icon-message" />
          <text class="item-label">
            在线聊天
          </text>
        </view>
        <text class="iconfont icon-arrow-right" />
      </view>

      <!-- 电话咨询 -->
      <view class="contact-item" @click="makePhoneCall">
        <view class="item-left">
          <text class="iconfont icon-phone" />
          <text class="item-label">
            电话咨询
          </text>
        </view>
        <text class="phone-number">
          400-123-4567
        </text>
      </view>

      <!-- 邮件咨询 -->
      <view class="contact-item" @click="sendEmail">
        <view class="item-left">
          <text class="iconfont icon-email" />
          <text class="item-label">
            邮件咨询
          </text>
        </view>
        <text class="email-address">
          support@example.com
        </text>
      </view>
    </view>

    <!-- 服务时间 -->
    <view class="service-time">
      <view class="time-title">
        服务时间
      </view>
      <view class="time-item">
        <text class="time-label">
          工作日：
        </text>
        <text class="time-value">
          9:00 - 18:00
        </text>
      </view>
      <view class="time-item">
        <text class="time-label">
          节假日：
        </text>
        <text class="time-value">
          10:00 - 16:00
        </text>
      </view>
    </view>

    <!-- 常见问题 -->
    <view class="faq-section">
      <view class="section-title">
        常见问题
      </view>
      <view
        v-for="(item, index) in faqList"
        :key="index"
        class="faq-item"
        @click="toggleFaq(index)"
      >
        <view class="faq-question">
          <text>{{ item.question }}</text>
          <text class="iconfont" :class="item.isOpen ? 'icon-arrow-up' : 'icon-arrow-down'" />
        </view>
        <view v-if="item.isOpen" class="faq-answer">
          {{ item.answer }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.service-info {
  background: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;

  .service-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .service-name {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .service-status {
    display: flex;
    align-items: center;

    .status-dot {
      width: 16rpx;
      height: 16rpx;
      background: #4caf50;
      border-radius: 50%;
      margin-right: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.contact-list {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;

  .contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .item-left {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 40rpx;
        color: #4caf50;
        margin-right: 20rpx;
      }

      .item-label {
        font-size: 28rpx;
        color: #333;
      }
    }

    .icon-arrow-right {
      font-size: 32rpx;
      color: #999;
    }

    .phone-number,
    .email-address {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.service-time {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .time-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .time-item {
    display: flex;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .time-label {
      font-size: 26rpx;
      color: #666;
      width: 120rpx;
    }

    .time-value {
      font-size: 26rpx;
      color: #333;
    }
  }
}

.faq-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;

  .section-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .faq-item {
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;

      text {
        font-size: 26rpx;
        color: #333;
      }

      .iconfont {
        font-size: 24rpx;
        color: #999;
      }
    }

    .faq-answer {
      padding: 0 0 20rpx;
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}
</style>
